<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟DOM</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    //1.JavaScript创建虚拟DOM
    // class List extends React.Component{
    //     render(){
    //         var child1=React.createElement('li',null,'苹果')
    //         var child2=React.createElement('li',null,'雪梨')
    //         var child3=React.createElement('li',null,'西瓜')
    //         return(
    //             React.createElement('ul',{className:'my-list'},child1,child2,child3)
    //         )
    //     }
    // }

    //说明：为了让可读性更好，使用JSX
    //2.JSX创建虚拟DOM
    class List extends React.Component{
        render(){
            return(
                <ul>
                    <li>苹果</li>
                    <li>雪梨</li>
                    <li>西瓜</li>
                </ul>
            )
        }
    }

    ReactDOM.render(<List/>,document.getElementById('root'))
    </script>
</body>
</html>